<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绑定样式</title>
    <script src="vue.js"></script>
    <style>
        .basic{
            height: 300px;

        }
        .mood1{
            background-color: #95be28;
        }
        .mood2{
            background-color: aqua;
        }
        .mood3{
            background-color: #3ac490;
        }
    </style>
</head>
<!--绑定样式：
        1.class样式：
            写法：class=“xxx”，xxx可以是字符串，对象，数组
                字符串写法适用于：类名不确定，要动态获取
                数组写法：绑定多个样式，个数不确定，名字不确定
                对象写法：绑定多个样式，个数确定，名字确定，但不确定用不用
        2.style样式
            ：style=“{fontSize:xxx}”其中xxx是动态值
            :style="[a,b]"其中a,b为对象

-->
<body>
<div id="root">
<!--class样式绑定--字符串写法，适用于：样式的类名不确定，需要动态指定-->
    <div class="basic" :class="a" @click="changeMood">{{test}}</div>
<!--class样式绑定--数组写法，适用于：样式绑定的个数，名字不确定-->
    <div class="basic" :class="arr" @click="changeMood">{{test}}</div>
<!--class样式绑定--对象写法，适用于：样式的个数确定，名字确定，但是动态决定要不要用-->
    <div class="basic" :class="obj" @click="changeMood">{{test}}</div>
<!--style样式绑定--对象数组写法-->
    <div class="basic" :style="[fze,fze2]" @click="changeMood">{{test}}</div>
</div>
</body>
<script type="text/javascript">
    new Vue({
        el:"#root",
        data:{
            test:"Althan",
            a:"mood1",
            j:1,
            arr:['mood1','mood2','mood3'],
            obj:{
                mood1:false,
                mood2:true
            },
            fze: {
                fontSize: '40px',

            },
            fze2: {

                color:"red",
                backgroundColor:"#0000"
            },

        },
        methods:{
            changeMood(){
               i = (this.j++)%3
                this.a="mood"+i.toString()
            }
        },



    })
</script>
</html>